<template>
    <div>
        <div v-transfer-dom>
            <previewer :list="previewerList" ref="previewer" :options="options"></previewer>
        </div>

        <divider v-if="voteCountShow">当前票数</divider>

        <group v-if="voteCountShow" v-for="(value, key) in voteCountMap" :key="key + 100" :title="key + '号作品'">
            <flexbox>
                <flexbox-item :span="8">
                    <x-progress :percent="value * 100 / voteCountTotal" :show-cancel="false"></x-progress>
                </flexbox-item>
                <flexbox-item :span="1">

                </flexbox-item>
                <flexbox-item>
                    <countup :start-val="1" :end-val="value" :duration="2"></countup>
                </flexbox-item>
                <flexbox-item :span="1">
                    <span>票</span>
                </flexbox-item>
            </flexbox>

        </group>


        <divider v-if="voteAreaShow">投票区域</divider>

        <checklist :options="voteList" v-model="voteValue" v-if="voteAreaShow" :max=1></checklist>

        <x-button type="primary" v-if="voteAreaShow" style="width: 80%;margin-top: 15px" @click.native="voteSubmit">提交
        </x-button>

        <divider>投票项目</divider>

        <group v-for="(item, i) in this.voteItems" :key="i"
               style="margin-bottom: 66px;border:0px;">
            <card style="border:0px;">

                <h1 slot="header" style="background-color: #fbf9fe;text-align: center;border:0px;">{{ 'No. ' + (i + 1)}}</h1>
                <img class="previewer-img" slot="content" :src="'http://cdn.maxstudiozhuhai.com/' + item.imgUrl" style="display:block;width: 100%;" @click="show(i)">
                <!--<div slot="content" class="card-padding">-->
                    <!--<p style="color:#999;font-size:12px;">{{ item.title }}</p>-->
                    <!--<p style="font-size:14px;line-height:1.2;">{{ item.brief }}</p>-->
                <!--</div>-->
            </card>
        </group>


    </div>


</template>

<script>
    /* eslint-disable */

    import { Card,
        Divider,
        Group,
        Previewer,
        TransferDom,
        Checklist,
        XButton,
        XProgress,
        Countup,
        Flexbox,
        FlexboxItem,
        XImg
    } from 'vux'
    import server from '../config/server'
    import * as util from '../config/util'

    export default {
        directives: {
            TransferDom
        },
        name: 'VoteManual',
        data () {
            return {
                voteItems: [],
                previewerList: [],
                voteList: [],
                voteValue: [],
                voteAreaShow: false,
                voteCountMap: {},
                voteCountTotal: 0,
                voteCountShow: false,
                options: {
                    getThumbBoundsFn (index) {
                        // find thumbnail element
                        let thumbnail = document.querySelectorAll('.previewer-img')[index]
                        // get window scroll Y
                        let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                        // optionally get horizontal scroll
                        // get position of element relative to viewport
                        let rect = thumbnail.getBoundingClientRect()
                        // w = width
                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                        // Good guide on how to get element coordinates:
                        // http://javascript.info/tutorial/coordinates
                    }
                }
            }
        },
        components: {
            Card,
            Divider,
            Group,
            Previewer,
            Checklist,
            XButton,
            XProgress,
            Countup,
            Flexbox,
            FlexboxItem,
            XImg
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                // 通过 `vm` 访问组件实例
                vm.$http.get(server.wechatAuthCheck).then(response => {
                    switch (response.data.errorCode) {
                        case 0:
                            break
                        case 10001:
                            var url = util.constructWechatAuth(encodeURIComponent(window.location.href))
                            window.location.href = url
                            break
                        default:
                            window.location.href = '/'
                            break

                    }

                })
            })
        },
        methods: {

            show (index) {
                this.$refs.previewer.show(index)
            },

            retrieveEntry () {

                this.$http.get(server.entryInfo, {params: {
                    activityId: this.$route.params.activityId,
                    catalogId: this.$route.params.catalogId
                }}).then(response => {
                    if (response.data.errorCode === 0) {
                        var data = response.data.data

                        if (data) {
                            this.voteItems = data

                            for (var i = 0;i < data.length;i++) {
                                this.previewerList.push({src: 'http://cdn.maxstudiozhuhai.com/' + data[i].imgUrl})
                                this.voteList.push({
                                    key: data[i].id,
                                    value: (i + 1) + '号项目',
                                    inlineDesc: data[i].title
                                })
                            }

                        }
                    }
                    this.$http.get(server.voteCheck, {params: {activityId: this.$route.params.activityId, catalogId: this.$route.params.catalogId}}).then(response => {
                        this.$vux.loading.hide()

                        if (response.data.errorCode === 0) {
                            var data = response.data.data

                            if (data) {
                                this.voteCountShow = true
                                this.voteCountTotal = data.totalCount
                                this.voteCountMap = data.voteCount
                            } else {
                                this.voteAreaShow = true
                                this.$vux.alert.show({
                                    title: '提示',
                                    content: '每人只能投票一次，请勿恶意刷票，否则取消参赛资格'
                                })

                            }
                        } else if (response.data.errorCode === 30002) {
                            this.voteCountShow = false;
                            this.voteAreaShow = false;
                            this.$vux.alert.show({
                                title: '错误',
                                content: response.data.message
                            })
                        }

                    })

                })
            },
            voteSubmit () {

                if (this.voteValue.length !== 1) {
                    this.$vux.alert.show({
                        title: '错误',
                        content: '请对一个作品进行投票喔！'
                    })
                    return
                }

                this.$http({
                    method: 'post',
                    url: server.voteSubmit,
                    params: {
                        entryId: this.voteValue[0],
                    }
                }).then((res) => {
                    var data = res.data.data

                    if (res.data.errorCode === 0) {
                        this.$vux.alert.show({
                            title: '提示',
                            content: '投票成功，感谢您对比赛的支持！',
                            onHide () {
                                location.reload()
                            }
                        })
                    } else {
                        this.$vux.alert.show({
                            title: '错误',
                            content: res.data.message,
                            onHide () {
                                location.reload()
                            }
                        })
                    }
                })
            }
        },
        mounted () {
            this.$vux.loading.show({
                text: '加载中'
            })
            this.retrieveEntry()


            var _this = this
            this.$wechat.ready(function () {
                _this.$wechat.onMenuShareAppMessage({
                    title: '2018漫享万山最美海岛设施评选', // 分享标题
                    desc: '快来为你心中的最美海岛设施投票吧！', // 分享描述
                    link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    type: '', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {

                    },
                    cancel: function () {

                    }
                })

                _this.$wechat.onMenuShareTimeline({
                    title: '2018漫享万山最美海岛设施评选', // 分享标题
                    link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                })
            })
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
